<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box" width="800" height="800">您的浏览器不支持画布</canvas>
    <script type="text/javascript">
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        pen.clearRect(0,0,box.width,box.height);
        pen.save();
        pen.translate(400,400);
        pen.rect(100,100,200,250);
        pen.restore();
        pen.stroke();

        pen.moveTo(0,0);
        pen.lineTo(400,0);
        pen.moveTo(0,0);
        pen.lineTo(0,400);
        pen.fillRect(-200,-200,50,100);
        pen.stroke();

    </script>
</body>
</html>